<template>
  <div class="recentUpdateMain">
    <div class="recentUpdatDiv">
      <div v-for="item in recentUpdateList" :key="item.id" class="info">
        <div
          class="enlargeDiv"
          :class="hide == item.id + '_' + true ? 'divDisplay' : ''"
        >
          <img :src="item.imgPath" alt="" />
          <div class="bigImgDiv">
            <span class="title"
              ><a href="#">{{ item.name }}</a>
              <el-rate
                v-model="item.fraction"
                disabled
                text-color="#FFC73F"
                disabled-void-color="#CFCFCE"
              >
              </el-rate>
            </span>
            <span class="autorDiv"
              >作者: <span>{{ item.autor }}</span></span
            >
            <span class="chapterDiv"
              >最新<span>{{ item.chapter }}</span></span
            >
            <span class="contentDiv">{{ item.content }}</span>
            <div class="buttonDiv">
              <el-button type="danger">开始阅读</el-button>
            </div>
          </div>
        </div>
        <div class="enlargeSmallDiv">
          <div class="smallImg">
            <img
              :src="item.imgPath"
              alt=""
              @mouseover="hide = item.id + '_' + true"
              @mouseout="hide = ''"
              :class="hide == item.id + '_' + true ? 'divHidden' : ''"
            />
          </div>
          <span class="smallTitle">{{ item.name }}</span>
          <span class="lastUpdate">{{ item.lastTime }}</span>
          <span class="chapterDiv"
            >最新 <span>{{ item.chapter }}</span></span
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'v-recentUpdateComic',
  props: {
    recentUpdateList: {
      type: Array
    }
  },
  data () {
    return {
      hide: ''
    };
  }
};
</script>
<style lang="less" scoped>
.recentUpdateMain {
  width: 100%;
  height: 100%;
  //  background-color: burlywood;
}
.recentUpdateMain .recentUpdatDiv {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;
  .divHidden {
    opacity: 0 !important;
  }
  .divDisplay {
    opacity: 1 !important;
    transform: scale(1) translateZ(0) translate3d(0, 0, 0) !important;
    z-index: 3 !important;
  }
}
.recentUpdateMain .recentUpdatDiv .info {
  width: 168px;
  height: 288px;
  float: left;
  position: relative;

  .enlargeDiv {
    float: left;
    opacity: 0;
    z-index: 1;
    transition: all 0.5s;
    transform: scale(0.8) translateZ(0);
    width: 210px;
    height: 340px;
    position: absolute;
    top: -11px;
    left: -21px;
    overflow: hidden;

    img {
      width: 100%;
    }
    .bigImgDiv {
      width: 210px;
      height: 50%;
      float: left;
      position: absolute;
      background-color: #ffffff;
      top: 50%;
      opacity: 0.9;

      .title {
        width: 210px;
        height: 40px;
        display: block;
        a {
          font-size: 20px;
          width: 110px;
          height: 100%;
          margin-left: 10px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          float: left;
          text-decoration: none;
          color: black;
          font-weight: bold;
        }
        a:hover {
          color: red;
        }
        .el-rate {
          width: 75px;
          height: 100%;
          float: left;
          margin-left: 10px;
          /deep/ .el-rate__item .el-rate__icon {
            line-height: 20px;
            font-size: 11px;
            margin-right: 3px;
          }
        }
      }
      .autorDiv {
        margin-left: 10px;
        font-size: 14px;
        display: block;
        width: 100%;
        span {
          margin-left: 14px;
          color: #b3b3b3;
        }
      }
      .chapterDiv {
        margin-left: 10px;
        margin-top: 5px;
        font-size: 14px;
        display: block;
        width: 100%;
        span {
          margin-left: 20px;
          color: red;
        }
      }
      .contentDiv {
        margin-left: 10px;
        margin-top: 5px;
        font-size: 14px;
        display: block;
        width: 98%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .buttonDiv {
        position: absolute;
        width: 100%;
        bottom: 0px;
        display: flex;
        justify-content: center;
        .el-button {
          margin: 0px auto;
          width: 96%;
          opacity: 1;
        }
      }
    }
  }
  .enlargeDiv:hover {
    opacity: 1 !important;
    transform: scale(1) !important;
    z-index: 3 !important;
  }
  .enlargeSmallDiv {
    float: left;
    width: 100%;
    height: 100%;
    //  background-color: lavender;
    position: absolute;
    top: 0;
    transition: all 1s;
    z-index: 1;
    .smallImg {
      width: 100%;
      height: 224px;
      overflow: hidden;
      z-index: 2;
      img {
        transition: all 0.5s;
        width: 100%;
        z-index: 2;
      }
    }
    span {
      display: block;
    }
    .smallTitle {
      font-size: 14px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      width: 100%;
      margin-top: 5px;
      font-weight: bold;
    }
    .lastUpdate {
      font-size: 9px;
      width: 100%;
      margin-top: 8px;
      color: #666666;
    }
    .chapterDiv {
      font-size: 9px;
      width: 100%;
      span {
        display: inline;
        color: red;
        margin-left: 10px;
      }
    }
  }
}
</style>
